<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
	<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
    <head>
           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
	<head>
<![endif]>
		<title>Mouse Indicator</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			@import "../../../../dojo/resources/dojo.css";
			@import "../../../../dijit/themes/tundra/tundra.css";
		</style>
		<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="isDebug: true, has:{'dojo-bidi': true}"></script>
		<script type="text/javascript">
			require(["dojo/ready", "dojo/on", "dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines",
				"dojox/charting/action2d/MouseZoomAndPan", "dojox/charting/action2d/MouseIndicator"],
				function(ready, on, Chart, Default, Lines, MouseZoomAndPan, MouseIndicator){

				ready(function(){
					var chart = new Chart("chart", { margins : {l :20, t:10, b:10, r: 50}});
					chart.addAxis("x", {fixLower: "minor", natural: true, stroke: "gray",
						majorTick: {color: "red", length: 4}, minorTick: {color: "blue", length: 2}});
					chart.addAxis("y", {vertical: true, min: 0, max: 100, majorTickStep: 10, minorTickStep: 5, stroke: "gray",
						majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}});
					chart.addPlot("default", {type: Lines, markers: false});
					chart.addSeries("Series A", [
						{ x: 1, y: 8},{ x: 2, y: 7},{ x: 3, y: 3},{ x: 4, y: 2},{ x: 5, y: 5},{ x: 6, y: 7},{ x: 7, y: 9},{ x: 8, y: 10},{ x: 9, y: 2},{ x: 10, y: 10},
						{ x: 15, y: 14},{ x: 16, y: 16},{ x: 17, y: 18},{ x: 18, y: 13},{ x: 19, y: 16},{ x: 20, y: 15},{ x: 21, y: 20},{ x: 22, y: 19},{ x: 23, y: 15},{ x: 24, y: 12},
						{ x: 25, y: 24},{ x: 26, y: 20},{ x: 27, y: 20},{ x: 28, y: 26},{ x: 29, y: 28},{ x: 30, y: 26},{ x: 31, y: 28},{ x: 32, y: 29},{ x: 33, y: 24},{ x: 34, y: 29},
						{ x: 35, y: 31},{ x: 36, y: 35},{ x: 37, y: 37},{ x: 38, y: 31},{ x: 39, y: 35},{ x: 40, y: 37},{ x: 41, y: 37},{ x: 42, y: 36},{ x: 43, y: 31},{ x: 44, y: 30},
						{ x: 45, y: 50},{ x: 46, y: 49},{ x: 47, y: 42},{ x: 48, y: 46},{ x: 49, y: 44},{ x: 50, y: 40},{ x: 51, y: 47},{ x: 52, y: 43},{ x: 53, y: 48},{ x: 54, y: 47},
						{ x: 55, y: 51},{ x: 56, y: 52},{ x: 57, y: 52},{ x: 58, y: 51},{ x: 59, y: 54},{ x: 60, y: 57},{ x: 61, y: 58},{ x: 62, y: 50},{ x: 63, y: 54},{ x: 64, y: 51},
						{ x: 65, y: 62},{ x: 66, y: 68},{ x: 67, y: 67},{ x: 68, y: 62},{ x: 69, y: 62},{ x: 70, y: 65},{ x: 71, y: 61},{ x: 72, y: 66},{ x: 73, y: 65},{ x: 74, y: 62},
						{ x: 75, y: 74},{ x: 76, y: 78},{ x: 77, y: 78},{ x: 78, y: 77},{ x: 79, y: 74},{ x: 80, y: 74},{ x: 81, y: 72},{ x: 82, y: 74},{ x: 83, y: 70},{ x: 84, y: 78},
						{ x: 85, y: 84},{ x: 86, y: 83},{ x: 87, y: 85},{ x: 88, y: 86},{ x: 89, y: 86},{ x: 90, y: 89},{ x: 91, y: 89},{ x: 92, y: 85},{ x: 93, y: 86},{ x: 94, y: 86},
						{ x: 95, y: 98},{ x: 96, y: 97},{ x: 97, y: 93},{ x: 98, y: 91},{ x: 99, y: 92},{ x: 100, y: 92}
					]);
					new MouseZoomAndPan(chart, "default", { axis: "x", enableScroll: false });
					var i = MouseIndicator(chart, "default", { series: "Series A",
						font: "normal normal bold 12pt Tahoma",	fillFunc: function(v){
								return v.y>55?"green":"red";
							}, 	labelFunc: function(v){
								return "x: "+v.x+", y:"+v.y;
							}});
					on(i, "Change", function(evt){
						if(evt.label){
							console.log(evt.label+" ("+evt.start.x+", "+evt.start.y+")");
						}
					});
					chart.setDir("rtl");
					chart.render();
				})
			});
		</script>
	</head>
	<body class="tundra" style="height:100%;width:100%">
    	<div id="chart" style="width:640px;height:480px"></div>
	</body>
</html>
